import React, { useRef, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, message, Space,Tooltip } from "antd";
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { getOrderList, addOrderApi } from './service'
import AddOrder from "./components/AddOrder";
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import FileOpen from '@/components/FileIframOpen';
interface OrderListProps { }
const OrderList: React.FC<OrderListProps> = ({ }) => {
    const actionRef = useRef<ActionType>();
    const [showAdd, setShowAdd] = useState<boolean>(false)
    const [stepFormValues, setStepFormValues] = useState<any>({});
    const [selectRowKeys, setSelectRowKeys] = useState<any>([]);
    const [fileUrlVisible, setFileUrlVisible] = useState<boolean>(false);
    const [fileUrl, setFileUrl] = useState<any>('');
    const statusTitle = ()=>{
        return (
            <>
            <Tooltip title="帮助文档">
            <span>状态</span>
            </Tooltip>
            </>
        )
    }
    const columns: ProColumns<any>[] = [
        {
            title: '序号',
            dataIndex: 'id',
            hideInSearch: true,
            width: 100,
            // fixed: 'left',
        },
        {
            title: '订单负责人',
            dataIndex: 'oeder_manage',
            width: 100,
            filters: [
                {
                    text: '张三',
                    value: '001'
                },
                {
                    text: '李四',
                    value: '002'
                },
            ]
        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            valueType: 'dateTime',
            hideInTable: true,
          },
        {
            title: '客户id',
            dataIndex: 'o_id',
            width: 100,
            hideInSearch: true,
        },
        {
            title: statusTitle(),
            dataIndex: 'status',
            width: 100,
            valueEnum: {
                '0': { text: '进行中', status: 'default' },
                '1': { text: '已完成', status: 'success' },
            },
            render:(_, record) => (
                <>

                </>
            )
        },
        {
            title: '姓名',
            dataIndex: 'name',
            width: 100,
            hideInSearch: true,
        },
        {
            title: '性别',
            dataIndex: 'sex',
            hideInSearch: true,
            width: 100,
            valueEnum: {
                '1': { text: '男', },
                '2': { text: '女', },
                '3': { text: '_', },
            }
        },
        {
            title: '电话',
            hideInSearch: true,
            dataIndex: 'phone',
            width: 100,
        },
        {
            title: '手机',
            hideInSearch: true,
            dataIndex: 'mobile_phone',
            width: 100,
        },
        {
            title: 'WhatsApp',
            dataIndex: 'WhatsApp',
            width: 100,
        },
        {
            title: '邮箱',
            hideInSearch: true,
            dataIndex: 'email',
            width: 100,
        },
        {
            title: '国家',
            dataIndex: 'country',
            width: 100,
        },
        {
            title: '市',
            dataIndex: 'city',
            width: 100,
        },
        {
            title: '州',
            dataIndex: 'state',
            width: 100,
        },
        {
            title: '邮编',
            hideInSearch: true,
            dataIndex: 'postal_code',
            width: 100,
        },
        {
            title: '公司名称',
            hideInSearch: true,
            dataIndex: 'company',
            width: 100,
        },
        {
            title: '收获地址',
            hideInSearch: true,
            dataIndex: 'receive_address',
            width: 100,
        },
        {
            title: '付款银行信息',
            hideInSearch: true,
            dataIndex: 'bank',
            width: 100,
        },
        {
            title: '付款账号',
            hideInSearch: true,
            dataIndex: 'banke_code',
            width: 100,
        },
        {
            title: '成交版型sku',
            hideInSearch: true,
            dataIndex: 'sku',
            width: 100,
        },
        {
            title: '成交量(kwp)',
            hideInSearch: true,
            dataIndex: 'kwp',
            width: 100,
        },
        {
            title: '成交数量(pcs)',
            hideInSearch: true,
            dataIndex: 'pcs',
            width: 100,
        },
        {
            title: '托数(pallet)',
            hideInSearch: true,
            dataIndex: 'pallet',
            width: 100,
        },
        {
            title: '税率(%)',
            hideInSearch: true,
            dataIndex: 'rate',
            width: 100,
        },
        {
            title: '成交额(EUR)',
            hideInSearch: true,
            dataIndex: 'transaction',
            width: 100,
        },
        {
            title: '优惠Coupon',
            hideInSearch: true,
            dataIndex: 'coupon',
            width: 100,
        },
        {
            title: '复购与否',
            hideInSearch: true,
            dataIndex: 'rep_status',
            width: 100,
            valueEnum: {
                '0': { text: '是', status: 'default' },
                '1': { text: '否', status: 'success' },
            },
        },
        {
            title: '发货仓库',
            hideInSearch: true,
            dataIndex: 'warehouse',
            width: 100,
        },
        {
            title: '物流公司',
            hideInSearch: true,
            dataIndex: 'logistics_company',
            width: 100,
        },
        {
            title: '发货方式及费用',
            hideInSearch: true,
            dataIndex: 'pay_method',
            width: 100,
        },
        {
            title: '物流追踪URL',
            hideInSearch: true,
            dataIndex: 'Logistics_url',
            width: 100,
        },
        {
            title: 'CRM文件',
            hideInSearch: true,
            dataIndex: 'cmrFileUrl',
            width: 100,
            render: (text, record) => {
                return (
                    record.cmrFileUrl ?
                        <a
                            onClick={() => {
                                setFileUrl(record.cmrFileUrl);
                                setFileUrlVisible(true);
                            }}
                        >
                            查看
                        </a> : '-'
                )
            }
        },

        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            fixed: 'right',
            width: 200,
            render: (_, record: any) => {
                return (
                    <Space direction='horizontal'>
                        <Button icon={<EditOutlined />} onClick={() => {
                            setStepFormValues(record);
                            setShowAdd(true);
                        }} type="primary" >编辑</Button>
                        <Button icon={<DeleteOutlined />} key="button" type={'primary'} danger >
                            删除
                        </Button>
                    </Space>
                )
            }
        }
    ]
    const listRequest = async (params: any) => {
        const res = await getOrderList(params);
        return res;
    }
    const toAddOrder = async (values: any) => {
        let res = await addOrderApi(values)
        if (res.success) {
            message.success('添加成功');
            setShowAdd(false)
            if (actionRef.current) {
                actionRef.current.reload();
            }
        }
    }
    const rowSelectionChange = (selectedRowKeys: React.Key[], selectedRows: any[]) => {
        setSelectRowKeys(selectedRowKeys);
    };
    return (
        <PageHeaderWrapper>
            <ProTable
                actionRef={actionRef}
                rowKey="id"
                columns={columns}
                options={false}
                request={listRequest}
                search={{
                    defaultCollapsed: false,
                }}
                toolBarRender={() => [
                    <Button key="button" onClick={() => setShowAdd(true)} type={'primary'} >
                        添加订单
                    </Button>,

                ]}
                rowSelection={{
                    selectedRowKeys: selectRowKeys,
                    onChange: rowSelectionChange,
                }}
                scroll={{ x: 1000 }}
            >


            </ProTable>
            {showAdd && (
                <AddOrder
                    modalVisible={showAdd}
                    info={stepFormValues}
                    onSubmit={(values) => toAddOrder(values)}
                    onCancel={() => {
                        setShowAdd(false)
                        setStepFormValues({})
                    }}

                >
                </AddOrder>
            )}
            {fileUrlVisible && (
                <FileOpen
                    title={''}
                    fielUrl={fileUrl}
                    modalVisible={fileUrlVisible}
                    onCancel={() => {
                        setFileUrlVisible(false);
                        setFileUrl('');
                    }}
                />
            )}
        </PageHeaderWrapper>
    );
};
export default OrderList;